// 样式私有化处理  styled-components
// 路由传参
// 路由跳转
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"
import {useHistory, useLocation} from "react-router-dom";
import qs from "qs";

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

class Menu extends React.Component {
    render() {
        console.log(this.props, 999)
        let {history} = this.props
        return <MenuBox>
            <CommonListBox>
                <li>手机b</li>
                <li>电脑b</li>
                <li>家电b</li>
                <button onClick={() => {
                    /* 传参方案1：问号传参
                    *   + 不安全\长度限制\丑
                    *   + 信息是显式，即便在目标路由内刷新，传递的信息也在
                    *  */
                    // history.push({
                    //     pathname: '/c',
                    //     // search 存储的是问号传参信息
                    //     // search: "id=100&name=111"
                    //     search: qs.stringify({
                    //         id: 111,
                    //         name: 222
                    //     })
                    // })
                    /* 传参方案2：路径传参(需要把传递的值，作为路径中的一部分)
                    *   + 比问号传参漂亮\长度限制\
                    *   + 信息在地址中，即便目标组件刷新，传递的信息也在
                    *  */
                    // history.push(`/c/1/100`)
                    /* 传参方案3：隐式传参(需要把传递的值，作为路径中的一部分)
                    *   + 安全，美观，没有限制
                    *   + 在目标组件内，传递的信息就丢失了
                    *  */
                    history.push({
                        pathname: "/c",
                        state: {
                            id: 111,
                            name: 2222
                        }
                    })
                }}>跳转
                </button>
            </CommonListBox>
        </MenuBox>;
    }
};

function Handle(Compoennt) {
    return function HOC(props) {
        let history = useHistory()
        let location = useLocation()
        return <Compoennt {...props} history={history} location={location}/>
    }
}

export default Handle(Menu);